<template>
  <div>
    <div class="box">
      <div class="part">
        <h2 class="title">对象数据整理——obj1</h2>
        <div class="item">
          <h5 class="title1">
            问题1：列表数据：包含（id号、标题title、描述dec），数据接口返回拆分成了三个数组，下标0返id,下标1返标题，下标2返描述。
          </h5>
          <h5 class="title1">
            需求：把各自数据放一个数组中，返回若干个（条目数）数组，每个数组对象中包含（id号、标题title、描述dec）
          </h5>
          <hr />
          <h5 class="title1">整理前数据：</h5>
          <img class="imgs" :src="img2" alt="" />
          <br />
          <h5 class="title1">整理后数据：</h5>
          <img class="imgs" :src="img3" alt="" />
          <hr />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img2: require("@/assets/imgs/img2.png"),
      img3: require("@/assets/imgs/img3.png"),
      // obj1数据-前
      oriData1: [
        // 标题
        {
          explain: "标题",
          options: [
            { content: "标题1", id: 1 },
            { content: "标题2", id: 2 },
            { content: "标题3", id: 3 },
            { content: "标题4", id: 4 },
            { content: "标题5", id: 5 },
          ],
        },
        //描述
        {
          explain: "描述",
          options: [
            { content: "描述1", id: 1 },
            { content: "描述2", id: 2 },
            { content: "描述3", id: 3 },
            { content: "描述4", id: 4 },
            { content: "描述5", id: 5 },
          ],
        },
        //编号
        {
          explain: "编号",
          options: [
            { content: "000001", id: 1 },
            { content: "000002", id: 2 },
            { content: "000003", id: 3 },
            { content: "000004", id: 4 },
            { content: "000005", id: 5 },
          ],
        },
      ],
      // obj1数据-后
      finalData1: [],
    };
  },
  created() {
    this.objFn1(); //对象整理1
  },
  methods: {
    changeJson(json) {
      return JSON.parse(JSON.stringify(json));
    },
    //obj1对象整理处理
    objFn1() {
      let oriLen = this.oriData1.length;
      // 最后数组长度
      let finalLen = this.oriData1[0].options.length;
      let arr1 = [];
      arr1.length = finalLen;
      for (let i = 0; i < this.oriData1.length; i++) {
        let options = this.oriData1[i].options;
        for (let j = 0; j < options.length; j++) {
          if (i == 0) {
            arr1[j] = {};
            arr1[j].title = options[j].content;
          }
          if (i == 1) {
            arr1[j].dec = options[j].content;
          }
          if (i == 2) {
            arr1[j].customerNo = options[j].content;
          }
        }
      }
      this.finalData1 = arr1;
    },
  },
  mounted() {},
};
</script>

<style lang="less">
.box {
  margin-bottom: 1rem;
  .item {
    margin-bottom: 0.5rem;
  }
  .imgs {
    width: 100%;
    height: 100%;
  }
  .part {
    border: 1px dashed #ddd;
    padding: 10px;
    margin: 10px;
  }
}
.title {
  text-align: center;
  margin-bottom: 0.2rem;
  font-size: 0.2rem;
}
.title1 {
  text-align: left;
  margin-bottom: 0.2rem;
  margin: 0.2rem 0;
}
hr {
  margin: 0.2rem 0;
  border-bottom: 1px solid #ddd;
}
</style>
